<%@page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="sitemesh" uri="/WEB-INF/tlds/sitemesh-decorator.tld"%>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/static"/>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>dhm-echarts demo:<sitemesh:title /></title>
	<sitemesh:head />
	<link rel="stylesheet" href="${ctxStatic}/layui/build/css/layui.css">
</head>
<body>

	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<!-- 头部区域（可配合layui已有的水平导航） -->
			<span style="font-size:35px;color:white">dhm-echarts演示demo</span>
		</div>
		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree site-demo-nav">

					<li class="layui-nav-item layui-nav-itemed"><a
						class="javascript:;" href="javascript:;">1.基础图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd>
								<a href="${contextPath}/base/line">折线图</a>
							</dd>
							<dd>
								<a href="${contextPath}/base/bar">条形图</a>
							</dd>
							<dd>
								<a href="${contextPath}/base/pie">饼状图</a>
							</dd>
							<dd>
								<a href="${contextPath}/base/stack">条形图和折线图</a>
							</dd>
						</dl></li>

					<li class="layui-nav-item layui-nav-itemed"><a
						class="javascript:;" href="javascript:;">2.常用图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/common/doubleValue">双数值</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/common/invertedColumnar">反柱状</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/common/rose">玫瑰图</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/common/funnel">漏斗图</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/common/radar">雷达图</a>
							</dd>
						</dl></li>

					<li class="layui-nav-item layui-nav-itemed"><a
						class="javascript:;" href="javascript:;">3.散点图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/scatter/linearRegression"> 线性回归</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/scatter/exponentialRegression"> 指数回归
								</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/scatter/logarithmicRegression"> 对数回归
								</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/scatter/polynomialRegression"> 多项式回归
								</a>
							</dd>
						</dl></li>

					<li class="layui-nav-item layui-nav-itemed"><a
						class="javascript:;" href="javascript:;">4.动态图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/dynamic/dynamicLine#end">动态折线</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/dynamic/dynamicBar#end">动态柱状</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/dynamic/dynamicMeter#end">动态仪表</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/dynamic/dynamicFlooding#end">动态注水图</a>
							</dd>
						</dl></li>

					<li class="layui-nav-item layui-nav-itemed"><a name="end"
						class="javascript:;" href="javascript:;">5.其他图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/other/map#end">地图图表</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/other/calendar#end">日历图</a>
							</dd>
							<dd class="">
								<a href="${contextPath}/other/multidimensionalScatter#end">多维数据散点图</a>
							</dd>
						</dl></li>
					
					<li class="layui-nav-item layui-nav-itemed"><a name="end"
						class="javascript:;" href="javascript:;">6.扩展：highcharts图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/highcharts/demo#end">3D图表</a>
							</dd>
						</dl></li>
					
					<li class="layui-nav-item layui-nav-itemed"><a name="end"
						class="javascript:;" href="javascript:;">7.扩展：vis图表<span
							class="layui-nav-more"></span></a>
						<dl class="layui-nav-child">
							<dd class="">
								<a href="${contextPath}/vis/timeline#end">时间线（轴）</a>
							</dd>
						</dl></li>
				</ul>
			</div>
		</div>

		<div class="layui-body">
			<div class="layui-collapse">

				<div class="layui-colla-item">
					<h1 class="layui-colla-title">1 图表主题展示</h1>
					<img id="echarts-theme" class="layui-colla-content layui-hidden" />
				</div>

				<div class="layui-colla-item">
					<h1 class="layui-colla-title">2 图表参数传递</h1>
					<form class="layui-colla-content layui-hidden layui-form">
						日期：<input type="date" name="dateString" value="2017-06-27" class="layui-input"/> <br />
						温度：<input type="number" name="temperatureInteger" value="30" class="layui-input"/> <br />
						<button lay-submit class="layui-btn" lay-filter="*">测试传入参数</button>
					</form>
				</div>

				<div class="layui-colla-item">
					<h1 class="layui-colla-title">3 主题和功能</h1>		
					<div class="layui-colla-content layui-form layui-show">				
						图表主题切换 <select name="theme" lay-filter="theme">
							<option value="dark">dark</option>
							<option value="infographic">infographic</option>
							<option value="macarons" selected="selected">macarons</option>
							<option value="roma">roma</option>
							<option value="shine">shine</option>
							<option value="vintage">vintage</option>
						</select> <br /> 
						图表功能切换 &nbsp
						<input type="checkbox" name="echarts_toolbox_checkbox" lay-filter="echarts_toolbox_checkbox"/>echarts-toolbox：工具栏调试
						<input type="checkbox" name="echarts_datazoom_checkbox" lay-filter="echarts_datazoom_checkbox"/>echarts-datazoom：数据缩放组件调试
						<input type="checkbox" name="echarts_markpoint_checkbox" lay-filter="echarts_markpoint_checkbox"/>echarts-markpoint：图表标注调试 
						<input type="checkbox" name="echarts_markline_checkbox" lay-filter="echarts_markline_checkbox"/>echarts-markline：图表标线调试
						<input type="checkbox" name="echarts_stack_checkbox" lay-filter="echarts_stack_checkbox"/>echarts-stack：柱状堆积图调试
					</div>
				</div>

			</div>
			<br />
			<!-- 内容主体区域 -->
			<sitemesh:body />
		</div>
		<div class="layui-footer">
			<!-- 底部固定区域 -->
		</div>
	</div>
	<script src="${ctxStatic}/layui/build/layui.js"></script>
	<script src="${ctxStatic}/layui/build/lay/dest/layui.all.js"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script>
		layui.use('code', function() {
			layui.code(); // 实际使用时，执行该方法即可。而此处注释是因为修饰器在别的js中已经执行过了
		});
		//http://www.layui.com/doc/modules/form.html
		layui.use('form', function(){
		 	var form = layui.form();
		  	//各种基于事件的操作，下面会有进一步介绍
		  	form.on('select(theme)', function(data){
		  		$("#echarts-theme").attr("src", "${ctxStatic}/echarts/theme/" + data.value + ".png");
				$(".echarts").attr("echarts-theme", data.value);
				$(".echarts").dblclick();
			});
			//工具栏调试
			form.on('checkbox(echarts_toolbox_checkbox)', function(data){
				$(".echarts").attr("echarts-toolbox", data.elem.checked);
				$(".echarts").dblclick();
			});  
			//数据缩放组件调试
			form.on('checkbox(echarts_datazoom_checkbox)', function(data){
				$(".echarts").attr("echarts-datazoom", data.elem.checked);
				$(".echarts").dblclick();
			});
			//图表标注调试
			form.on('checkbox(echarts_markpoint_checkbox)', function(data){
				$(".echarts").attr("echarts-markpoint", data.elem.checked);
				$(".echarts").dblclick();
			});
			//图表标线调试
			form.on('checkbox(echarts_markline_checkbox)', function(data){
				$(".echarts").attr("echarts-markline", data.elem.checked);
				$(".echarts").dblclick();
			});
			//图表标线调试
			form.on('checkbox(echarts_stack_checkbox)', function(data){
				$(".echarts").attr("echarts-stack", data.elem.checked);
				$(".echarts").dblclick();
			});
			//传递表单参数
			form.on('submit(*)', function(data){
			  $(".echarts").dblclick();
			  return false;
			});
		});
	</script>
</body>
</html>
